import React from 'react'
import styled from './login.module.css'
import { Button, Form, Input, message } from 'antd';
import Particles from 'react-tsparticles';
import { loadFull } from "tsparticles";
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

export default function Login() {
  const navigate = useNavigate();
  const onFinish = (values) => {
    axios({
      url:`/users?username=${values.username}&password=${values.password}&_expand=role&roleState=true`
    }).then(res =>{
      if(res.data.length === 0){
        message.error('登陆失败，检查你的用户名和密码是否正确');
      }
      else{
        console.log(res.data[0]);
        localStorage.setItem('token',JSON.stringify(res.data[0]))
        navigate('/')
      }
    })
  };

  const onFinishFailed = (errorInfo) => {
    message.error('登陆失败，检查你的用户名和密码是否正确');
  };
  
  const particlesInit = async (main) => {
    console.log(main);

    // you can initialize the tsParticles instance (main) here, adding custom shapes or presets
    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
    // starting from v2 you can add only the features you need reducing the bundle size
    await loadFull(main);
  };

  const particlesLoaded = (container) => {
    console.log(container);
  };
  return (
    <div className={styled.container}>
      <Particles 
        id="tsparticles"
        init={particlesInit}
        loaded={particlesLoaded}
        options={{
          "background": {
            "color": {
              "value": "#ffffff"
            },
            "image": "url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Ff27c1ccb97b9651e9060239eb578b90f17677a55.png&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658983715&t=60e1d013fd814f8cbc8fc355c78f6287')",
            "position": "50% 50%",
            "repeat": "no-repeat",
            "size": "cover"
          },
          "backgroundMask": {
            "cover": {
              "color": {
                "value": {
                  "r": 255,
                  "g": 255,
                  "b": 255
                }
              }
            },
            "enable": true
          },
          "fullScreen": {
            "zIndex": 0
          },
          "interactivity": {
            "events": {
              "onClick": {
                "enable": true,
                "mode": "push"
              },
              "onHover": {
                "enable": true,
                "mode": "bubble",
                "parallax": {
                  "force": 60
                }
              }
            },
            "modes": {
              "bubble": {
                "distance": 400,
                "duration": 2,
                "opacity": 1,
                "size": 100,
                "divs": {
                  "distance": 200,
                  "duration": 0.4,
                  "mix": false,
                  "selectors": []
                }
              },
              "grab": {
                "distance": 400
              },
              "repulse": {
                "divs": {
                  "distance": 200,
                  "duration": 0.4,
                  "factor": 100,
                  "speed": 1,
                  "maxSpeed": 50,
                  "easing": "ease-out-quad",
                  "selectors": []
                }
              }
            }
          },
          "particles": {
            "color": {
              "value": "#ffffff"
            },
            "links": {
              "color": {
                "value": "#ffffff"
              },
              "distance": 150,
              "enable": true
            },
            "move": {
              "attract": {
                "rotate": {
                  "x": 600,
                  "y": 1200
                }
              },
              "enable": true,
              "outModes": {
                "bottom": "out",
                "left": "out",
                "right": "out",
                "top": "out"
              }
            },
            "number": {
              "density": {
                "enable": true
              },
              "value": 80
            },
            "opacity": {
              "animation": {
                "speed": 1,
                "minimumValue": 0.1
              }
            },
            "size": {
              "random": {
                "enable": true
              },
              "value": {
                "min": 1,
                "max": 30
              },
              "animation": {
                "speed": 40,
                "minimumValue": 0.1
              }
            }
          }
        }} />
      <Form
        className={styled.tables}
        style={{
          color:'white'
        }}
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <div className={styled.logintitle}>全球新闻发布系统</div>
        <Form.Item
          label="用户名"
          name="username"
          rules={[
            {
              required: true,
              message: 'Please input your username!',
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[
            {
              required: true,
              message: 'Please input your password!',
            },
          ]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Button type="primary" htmlType="submit" style={{marginTop:'1.5rem', backgroundColor:'rgba(0,0,0,0.3)', border:'none'}}>
            登录
          </Button>

          <h3 style={{float:'right', cursor:'pointer', fontWeight:'bold'}} onClick={()=>{
            navigate('/visitor')
          }}>游客系统</h3>
        </Form.Item>
      </Form>
      
    </div>
  )
}
